<!--
  Copyright 2016 Google Inc.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
!-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>EarlGrey Rich WebView Test</title>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Material Design Lite">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#3372DF">

    <link rel="stylesheet" href="material.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
    #view-source {
      position: fixed;
      display: block;
      right: 0;
      bottom: 0;
      margin-right: 40px;
      margin-bottom: 40px;
      z-index: 900;
    }
    </style>
  </head>
  <body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
        </div>
        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
          <h3>Rich WebView Test</h3>
        </div>
        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
        </div>
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark" id="aaa" label="bbb" title="ccc">
            <a class="mdl-layout__tab" href="#components">Components</a>
            <a class="mdl-layout__tab" href="#long_table">Long Table</a>
            <a class="mdl-layout__tab" href="">More ...</a>
        </div>
      </header>
      <!-- TODO:  Add a drawer tab panel in the future. -->
      <main class="mdl-layout__content">
        <div class="mdl-layout__tab-panel is-active" id="components">
          <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <!-- Test Image -->
            <header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 mdl-color-text--white">
              <img src="eg_mov.gif"
                  alt="A img image." id="test_image">
            </header>
            <div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
              <div class="mdl-card__supporting-text">
                <h4>Static Text</h4>
                Free free to test ME as static test.
              </div>
              <div class="mdl-card__actions">
                <a href="#" class="mdl-button">Image.</a>
              </div>
            </div>
          </section>
          <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing">
                <h4 class="mdl-cell mdl-cell--12-col">It't time for Input Fields!</h4>
                <div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
                  <div class="mdl-textfield mdl-js-textfield">
                    <input class="mdl-textfield__input" type="text" id="input_field" name="input_field" value="INPUT FIELD" title="INPUT FIELD">
                    <label class="mdl-textfield__label" for="input_field">This one is hard to match! </label>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
            <div class="mdl-card mdl-cell mdl-cell--12-col">
              <div class="mdl-card__supporting-text">
                <h4>Button and Animation</h4>
                <div id="hidden" >Told ya.</div>
                <button
                    class="mdl-button mdl-js-button mdl-button--colored mdl-button--raised mdl-js-ripple-effect"
                    onclick="javascript:document.getElementById('hidden').removeAttribute('style');">
                  Dont Click Me
                </button>
              </div>
            </div>
          </section>
        </div>
        <div class="mdl-layout__tab-panel" id="long_table">
          <section class="section--center mdl-grid mdl-grid--no-spacing">
            <div class="mdl-cell mdl-cell--12-col">
              <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
                <thead>
                  <tr>
                    <th class="mdl-data-table__cell--non-numeric">Column 1</th>
                    <th class="mdl-data-table__cell--non-numeric">Column 2</th>
                  </tr>
                </thead>
                <tbody id="table_body">
                </tbody>
              </table>
            </div>
          </section>
        </div>
        <footer class="mdl-mega-footer">
          <div class="mdl-mega-footer--bottom-section">
            <div class="mdl-logo">
              EarlGrey Rich WebView Test Page. Powered by <a href="https://google.com/design">Material Design</a>.
            </div>
          </div>
        </footer>
      </main>
    </div>
    <script>
      /** Hide the hidden content. */
      document.getElementById('hidden').setAttribute('style', 'display:none;');
    </script>
    <script>
      /** Table building script. */
      var rows = [];
      for (var i=1; i < 31; i++) {
        rows.push('<tr><td>R'+i+'C1</td><td>R'+i+'C2</td></tr>');
      }
      document.getElementById('table_body').innerHTML = rows.join('\n');
    </script>
    <script src="material.min.js"></script>
    <script>
      /** Name the checkbox for testing. */
      function nameCheckBox()
      {
        var checkboxList = document.getElementsByClassName('mdl-checkbox__input');
        if (checkboxList.length > 0) {
          for (var i=0; i < checkboxList.length; i++) {
            checkboxList[i].setAttribute('title', 'R'+i+'CHECKBOX');
          }
        } else {
          setTimeout( nameCheckBox, 100 );
        }
      }
      nameCheckBox();
    </script>
  </body>
</html>

